<template>
  <div class="cpassword">
    <h2 class="mytitle">修改密码</h2>
    <div class="mycontent">
      <el-form
          label-position="left"
          label-width="100px"
          
        >
      <el-form-item label="旧密码">
        <el-input
          placeholder="请输入旧密码"
          v-model="input1"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input
          placeholder="请输入新密码"
          v-model="input2"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="确认新密码">
        <el-input
          placeholder="请再次输入新密码"
          v-model="input3"
          show-password
        ></el-input>
      </el-form-item>
      </el-form>
      <el-button type="primary" plain @click="tijiao">提交</el-button>
      <el-button type="primary" plain @click="chongzhi">重置</el-button>
    </div>
  </div>
</template>

<script>
import Api from "../assets/js/api";
export default {
  data() {
    return {
      
      input1: "",
      input2: "",
      input3: "",
    };
  },
  methods: {
    tijiao() {
      console.log(111);

      if (this.input1 == "" || this.input2 == "" || this.input3 == "") {
        this.$message.error("密码不能为空");
      } else if (this.input2 !== this.input3) {
        this.$message.error("新密码不一致");
      } else if (this.input1 == this.input2) {
        this.$message.error("新密码和旧密码不能一样");
      } else {
        let that = this;
        this.$http({
          url: Api.updatePassword, //接口
          method: "POST", //请求方式 默认get
          headers: {
            JWTHeaderName: sessionStorage.getItem("token"),
          },
          data: {
            oldPassword: that.input1,
            newPassword: that.input2,
          }, // data数据
        }).then((res) => {
          console.log(res);
           this.$message({
          message: '修改成功',
          type: 'success'
        });
        });
      }
    },
    chongzhi() {
      this.input1 = "";
      this.input2 = "";
      this.input3 = "";
    },
  },
};
</script>

<style scoped>
.mytitle {
  margin-top: 0;
}
.mycontent{
  padding: 20px;
}
</style>
